<template>
  <div class="search">
    <span class="iconfont search__icon">&#xe6df;</span>
    <input
      type="text"
      class="search__input"
      :placeholder="placeholder"
    />
  </div>
</template>

<script>
export default {
  name: "Search",
  props: [ 'placeholder' ],
};
</script>

<style lang="scss" scoped>
@import "../style/viriables.scss";
.search {
  display: flex;
  flex: 1;
  position: relative;
  &__icon {
    position: absolute;
    top: 50%;
    left: 0.16rem;
    font-size: 0.18rem;
    color: $content-iconcolor;
    margin-top: -0.1rem;
  }
  &__input {
    flex: 1;
    font-size: 0.14rem;
    color: $content-iconcolor;
    line-height: 0.16rem;
    border: none;
    border-radius: 0.16rem;
    padding: 0.08rem 0.18rem 0.08rem 0.44rem;
    background-color: #f5f5f5;
  }
}
</style>